<template>
  <main-card-admin title="应用审核" :tabs="getTabs()" :loading="loading" :main-body-style-obj="{ paddingTop: '32px' }">
    <template #screen-space>
      <a-row :align="'middle'" justify="space-between">
        <a-col class="mr-16">
          <a-select v-model:value="pageForm.status" class="w-112" @change="getDataList()">
            <a-select-option v-for="item in authOptions" :key="item.value" :value="item.value" :title="item.label">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-col>

        <a-col flex="1" />
        <a-col>
          <condition-search
            :condition="[
              { name: '用户名称', key: 'username' },
              { name: '应用名称', key: 'name' },
              { name: '审核人', key: 'auditorName' }
            ]"
            @search="onSearch"
          />
        </a-col>
      </a-row>
    </template>
    <a-table
      :style="{ width: '100%' }"
      :columns="tableColumns"
      :data-source="logList"
      :pagination="false"
      :row-key="(r:RecordListItem) => r.id"
      :custom-row="(r:RecordListItem) => ({ onClick: () => previewClient(r) })"
      class="header-right-angle admin-table"
      @change="onTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'status'">
          <div v-if="record.status === '驳回'" class="reject">
            <div class="circular"></div>
            {{ record.status }}
          </div>
          <div v-else>{{ record.status }}</div>
        </template>
        <template v-else> {{ replaceEmptyStr(record[column.dataIndex as string]) }} </template>
      </template>
    </a-table>
    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />
  </main-card-admin>
  <!-- 详情弹窗 -->
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  import ConditionSearch, { SearchFn } from '@/components/ConditionInput/index.vue'
  import useList from '@/hooks/use-list'
  import { applicationAuditApi } from '@/services/api'
  import { filterTableColumns, replaceEmptyStr } from '@/utils'

  import { RecordListItem } from '../../types'
  import { getTabs } from '../../utils'

  interface PageForm {
    status: string //0禁用 1可用
    auditorName: string
    username: string
    serialNumber: string
    columns: 'updateTime' | 'updateTime'
    order: 'desc' | 'asc'
  }

  const router = useRouter()

  const authOptions = [
    { label: '全部结果', value: '' },
    { label: '通过', value: '1' },
    { label: '驳回', value: '2' }
  ]

  // 表格
  const tableColumns = ref(
    filterTableColumns([
      {
        title: '用户名称',
        dataIndex: 'username',
        width: 108
      },
      {
        title: '应用名称',
        dataIndex: 'name',
        width: 148
      },
      {
        title: '应用描述',
        dataIndex: 'content'
      },
      {
        title: '审核人',
        dataIndex: 'auditorName',
        width: 108
      },
      {
        title: '审核结果',
        dataIndex: 'status',
        width: 108
      },
      {
        title: '审核时间',
        dataIndex: 'updateTime',
        width: 190,
        isSort: true
      }
    ])
  )

  const {
    pageForm,
    loading,
    dataList: logList,
    getDataList
  } = useList<PageForm, RecordListItem>(applicationAuditApi.auditRecordList, {
    status: '',
    username: '',
    serialNumber: '',
    auditorName: '',
    columns: 'updateTime',
    order: 'desc'
  })

  const onTableChange = (pagination: any, filters: any, sorter: any) => {
    const order = sorter.order === 'ascend' ? 'asc' : 'desc'
    getDataList({ offset: 1, order })
  }

  const onSearch: SearchFn = obj => {
    getDataList(obj)
  }

  const previewClient = (item: RecordListItem) => {
    router.push({
      path: `/admin/app-check/check-log/detail/${item.id}`
    })
  }

  getDataList()
</script>

<style lang="less" scoped>
  .reject {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;

    .circular {
      width: 6px;
      height: 6px;
      background: #e44833;
      border-radius: 50%;
    }
  }
</style>
